<template>
	<uni-popup ref="popup" background-color="#fff">
	<view class="popup">
		<view class="photoBox">
			<text>获取头像:</text>
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="imgUrl ? imgUrl : defaultImage" @error="imgUrl = defaultImage"></image>
			</button>
		</view>
		<view class="phoneBox">
			<text>获取手机号:</text>
			<button class="avater-wrapper" open-type="getPhoneNumber" @getphonenumber="getMobile">
			{{phoneLabel}}
			</button>
		</view>
		<view class="labelNameBox">
			<text>填写用户名:</text>
			<input type="nickname" class="uni-input" placeholder="用户名" v-model="nameLabel" @blur="blurNickName"/>
		</view>
		<view class="loginBox">
			<button @click="loginClick">登录</button>
		</view>
	</view>
	</uni-popup>
</template>

<script>
	import {
		openId,
		mobile,
		login
	} from "@/api/index.js"
	import {
		dev_base_api,
		stage_base_api,
		prod_base_api
	} from "@/config.js";
	import jwtSign from "@/utils/jwtSign.js";
	export default {
		name: "customPopup",
		data(){
			return {
				openId:"",
				nameLabel: "",
				imgUrl: "",
				phoneLabel: "点击授权获取手机号",
				defaultImage:"https://edu.hailun-music.com/static/talent/homeImage/默认头像.png",
			};
		},
		methods:{
			onChooseAvatar(e) {
				console.log("e",e);
				let baseUrl = 'https://weidian.nb-usee.com';
				const accountInfo = uni.getAccountInfoSync();
				let header = {};
				let data = {};
				let params = {};
				// 需要加签的
				// if (type === "jwt") {
				let Authorization = {
					"uid": this.$store.state.uid,
					"iat": (new Date().getTime() / 1000).toFixed(0),
					"token": this.$store.state.token,
					...params,
				};
			
				Authorization = jwtSign(Authorization);
				header.Authorization = Authorization;
				// 开发版将传参放入data
				data = params;
				// }
				uni.uploadFile({
					url: baseUrl + '/api/upload/index',
					filePath:e.detail.avatarUrl,
					header: header,
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						let imgValue = JSON.parse(uploadFileRes.data)
						this.imgUrl = imgValue.data.url;
					}
				});
			},
			blurNickName(e) {
				this.nameLabel = e.detail.value;
			},
			loginClick() {
				if(this.nameLabel && this.imgUrl && this.phoneLabel != "点击授权获取手机号")
				{
					this.login({
						'openid':this.openId,
						'nickname':this.nameLabel,
						'headimg':this.imgUrl,
						'mobile':this.phoneLabel,
					})
				}
				else
				{
					uni.showToast({
						icon:"none",
						title:"用户名,手机号或头像不能为空"
					})
				}
			},
			open(){
				uni.showLoading({
					title: '提交中'
				})
			   this.getOpenid((openId)=>{
				   this.openId = openId;
					this.login({
						'openid':openId
					})
			   });
			},	
			getMobile(e){
				console.log(e);
				mobile({
					code:e.detail.code,
				}).then((res)=>{
					this.phoneLabel = res.data.phone_info.phoneNumber;
				})
			},
			getOpenid(callback){
					uni.login({
						'onlyAuthorize': true,
						success: (res) => {
							if (res.errMsg == 'login:ok') {
								openId({
									code: res.code
								}).then((res) => {
									  callback(res.data.openid);
								})
							}
						},
					})
			},
			login(param) {
				login(param).then((res) => {
					uni.hideLoading();
					this.$store.dispatch('setUid', res?.data?.uid);
					this.$store.dispatch('setToken', res?.data?.token);
					this.$store.dispatch('setRealname',res?.data?.nickname);
					this.$store.dispatch('setImageurl', res?.data?.headimg);
					this.$store.dispatch('setMobile', res?.data?.mobile);
					this.$store.dispatch('setHas_info', res?.data?.has_info);
					 this.$emit('popupType')
					 this.$refs.popup.close()
				}).catch((error)=>{
					uni.hideLoading();
					this.$refs.popup.open("bottom")
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.popup {
		width: 100%;
		background-color: white;

		.photoBox {
			width: 100%;
			min-height: 140rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid rgb(242, 242, 242);
			
			text {
				width: 150rpx;
				font-size: 14px;
				padding-right: 20px;
			}
			button {
				margin: 0;
				border: none !important;
				box-shadow: none !important;

				outline: 0;
				width: 80rpx;
				height: 80rpx;
				padding: 0;
				border: 1px solid white !important;
				border-radius: unset !important;

				image {
					width: 100%;
					height: 100%;
				}
			}
			
		}
		.phoneBox{
			width: 100%;
			min-height: 140rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid rgb(242, 242, 242);
			
			text {
				width: 150rpx;
				font-size: 14px;
				padding-right: 20px;
			}
			.avater-wrapper{
				width:170px;
				margin: 0;
				font-size: 14px;
				border: none !important;
				box-shadow: none !important;
			}
		}
		.labelNameBox {
			width: 100%;
			min-height: 140rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid rgb(242, 242, 242);

			text {
				width: 150rpx;
				font-size: 14px;
				padding-right: 20px;
			}

			input {}
		}

		.loginBox {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx 20rpx;
			box-sizing: border-box;

			button {
				outline: 0;
				width: 60%;
				height: 80rpx;
				font-size: 15px;
				border: 0;
				background-color: rgb(53, 157, 63);
				border-radius: 40rpx;
				color: white;
				line-height: 80rpx;
			}
		}
	}
</style>
